<template>
  <div>
    <div class="box">
      <el-form :model="queryForm" ref="queryRef">
        <el-row>
          <el-col :span="6">
            <el-form-item label="课程：" prop="cur_code">
              <el-select v-model="queryForm.cur_code" class="m-2" placeholder="请选择" filterable clearable>
                <el-option v-for="item in courseList" :key="item.cur_code" :label="item.cur_name"
                  :value="item.cur_code" />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="学生姓名：" prop="stu_name">
              <el-input v-model="queryForm.stu_name" placeholder="请输入" clearable />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-button @click="getOrderList(null)" type="primary">
              <icons name="search"></icons>
              搜索
            </el-button>
            <el-button @click="reset()">
              <icons name="reset"></icons>重置
            </el-button>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="container">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="stu_name" label="姓名" align="center" header-align="center" />
        <el-table-column prop="stu_gender" label="性别" align="center" header-align="center" />
        <el-table-column prop="stu_age" label="年龄" align="center" header-align="center" />
        <el-table-column prop="cur_name" label="课程" align="center" header-align="center" />
        <el-table-column prop="tel" label="电话" align="center" header-align="center" />
        <el-table-column prop="parentTel" label="父母电话" align="center" header-align="center" />
      </el-table>
      <div class="paging">
        <el-pagination layout="total, sizes,prev,pager,next,jumper" :page-size="queryForm.pageSize"
          :page-sizes="[10, 20, 30, 40, 50]" :total="total" :current-page.sync="queryForm.page"
          @current-change="hCurrentChange" @size-change="hSizeChange" />
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import { QueryCourseList, queryDataPage } from '@/api/mymodel'
import { queryCourseList } from '@/api/mymodel'
import { defineComponent, reactive, ref } from 'vue'
import useCurrentInstance from '@/utils/useCurrentInstance'
import { ElMessage } from 'element-plus'
export default defineComponent({
  setup(props) {
    const { proxy } = useCurrentInstance()
    const queryRef: any = ref(null)
    const searchLoading = ref(false)
    const tableLoading = ref(false)
    const tableData = ref(null)
    const total = ref(0)
    const courseList: any = ref([])
    const userInfo: any = window.sessionStorage.getItem('userInfo')
    const queryForm = reactive({
      cur_code: null,
      stu_name: null,
      page: 1,
      pageSize: 10,
    })

    const getOrderList = (page) => {
      page && (queryForm.page = page)
      searchLoading.value = true
      tableLoading.value = true
      const params = { ...queryForm, tea_code: JSON.parse(userInfo).tea_code }
      queryDataPage(params).then((res: any) => {
        total.value = res.data.total
        tableData.value = res.data.result
      }).finally(() => {
        searchLoading.value = false
        tableLoading.value = false
      })
    }

    // const getCourseList = () => {
    //   QueryCourseList({ teacher_id: JSON.parse(userInfo).tea_code }).then((res: any) => {
    //     courseList.value = res.data
    //   })
    // }

    const getCourseList = () => {
      queryCourseList({ tea_code: JSON.parse(userInfo).tea_code }).then((res: any) => {
        courseList.value = res.data
      })
    }


    const reset = () => {
      queryRef.value.resetFields()
    }

    const hCurrentChange = (val) => {
      queryForm.page = val
    }

    const hSizeChange = (val) => {
      queryForm.pageSize = val
    }

    getOrderList(null) // 分页查询
    getCourseList() // 我的课程下拉

    return {
      total,
      queryForm,
      queryRef,
      searchLoading,
      tableLoading,
      courseList,
      tableData,
      hCurrentChange,
      hSizeChange,
      getOrderList,
      reset
    }
  },
})
</script>
